<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.min.css" />
<script type="text/javascript" src="jquery-mobile/jquery.js"></script>
<script type="text/javascript" src="jquery-mobile/jquery.mobile.min.js"></script>
<title>Page Title</title>
<style type="text/css">
.portrait label.error, .landscape label.error {
    color: red;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 0.5em;
    width: 100%;
    float: none;
}
#remenberpwd{
	width:60%;
	margin-left:22%;
	}
#frmReg{
	position:absolute;
	top:20%;
	margin-left:10%;
	width:80%;
	}
#frmReg div lable{
	width:200px;
}
#submitbtn{
	margin-left:10%;
	}
.required{
	width:30%;
}
.landscape label.error { display: inline-block;  }
.portrait label.error { margin-left: 0; display: block; }
em { color: red; font-weight: bold; margin-left:20%;}
</style>
<script type="text/javascript">
function isEmail(){
   var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
   var str = document.getElementById("email").value;
   if(reg.test(str)){
	   // document.getElementById("emailContainer").innerHTML = document.getElementById("emailContainer").innerHTML + "<em></em>";
   		//alert("邮箱格式正确");
		document.getElementById("emailCue").innerHTML = "";
		document.getElementById("emailCue").style.display = "none";
	}
	else{
		document.getElementById("emailCue").innerHTML = "<br/><em>*请填写正确的邮箱地址！</em>";
		document.getElementById("emailCue").style.display = "block";
		//alert("请填写正确的邮箱地址！");
		}
}
function isPasswd(){ 
	var patrn=/^(\w){6,20}$/;
	var passwordStr = document.getElementById("password").value;
	if(patrn.test(passwordStr)){
		document.getElementById("passwordCue").innerHTML = "";
		document.getElementById("passwordCue").style.display = "none";
	}     
	else{
		document.getElementById("passwordCue").innerHTML = "<br/><em>*密码只能是6-20个字符、数字、下划线！</em>";
		document.getElementById("passwordCue").style.display = "block";
	}
} 
function isUserName() 
{ 
	var patrn=/^(\w){6,20}$/;
	var userNameStr =  document.getElementById("username").value;
	if(patrn.test(userNameStr)){
		document.getElementById("userNameCue").innerHTML = "";
		document.getElementById("userNameCue").style.display = "none";
	}
	else{
		document.getElementById("userNameCue").innerHTML = "<br/><em>*用户名只能是6-20个字符、数字、下划线！</em>";
		document.getElementById("userNameCue").style.display = "block";
	}
} 
function isPasswdConfirmed() 
{ 
	var patrn1= document.getElementById("password").value;;
	var patrn2 =  document.getElementById("passwordConfirm").value;
	if(patrn1 == patrn2){
		document.getElementById("passwordConfirmCue").innerHTML = "";
		document.getElementById("passwordConfirmCue").style.display = "none";
	}
	else{
		document.getElementById("passwordConfirmCue").innerHTML = "<br/><em>*两次输入密码不一致！</em>";
		document.getElementById("passwordConfirmCue").style.display = "block";
	}
} 
</script>

</head>

<body>
<div data-role="page" class="ui-page-fullscreen">
<div data-role="content">
  <form id="frmReg">
    <div data-role="fieldcontain">
      <label for="username" class="textlable">*用 户 名:</label>
      <input type="text" onblur="isUserName()" id="username" name="username" class="required" />
	  <label id="userNameCue" style="display:none;"></label>
    </div>
    <div data-role="fieldcontain">
      <label for="password" class="textlable">*密 码:</label>
      <input type="password" onblur="isPasswd()" id="password" name="password" class="required" />
	  <label id="passwordCue" style="display:none;"></label>
    </div>
    <div data-role="fieldcontain">
      <label for="passwordConfirm" class="textlable">*确认密码:</label>
      <input type="password" onblur="isPasswdConfirmed()" id="passwordConfirm" name="passwordConfirm" class="required" />
	  <label id="passwordConfirmCue" style="display:none;"></label>
    </div>
    <div data-role="fieldcontain" id="emailContainer">
      <label for="email" class="textlable">*验证邮箱:</label>
      <input type="text" onblur="isEmail()" id="email" name="email" class="required" />
	  <label id="emailCue" style="display:none;"></label>
    </div>
    <div data-role="fieldcontain" id="remenberpwd">
      <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
      <label for="checkbox-0">我已阅读相关条款</label>
      <a href="#">相关条款及协议</a>
    </div>
    <div id="submitbtn">
      <button class="btnLogin" type="submit" data-theme="e" data-inline="true" data-transition="none" id="loginBtn">提 交</button>
      <button class="btnLogin" type="reset" data-theme="e" data-inline="true" data-transition="none" id="resetBtn">重 置</button>
    </div>
  </form>
</div>
</div>
</body>
</html>
